<template>
  <div class="pr">
    <div
      id="echart8"
      style="width:46vw;height:35vh;"
    ></div>
    
  </div>
</template>

<script>
import { init } from "echarts";
export default {
  name: "box8",
  props:{
    chooseBatch:String
  },
  data() {
    return {
      myChart:null,
      list:[
        {Name:'科室1',CountA:70,CountB:52},
        {Name:'科室2',CountA:80,CountB:64},
        {Name:'科室3',CountA:48,CountB:37},
        {Name:'科室4',CountA:71,CountB:48},
        {Name:'科室5',CountA:65,CountB:42},
        {Name:'科室6',CountA:59,CountB:32},
        {Name:'科室7',CountA:76,CountB:44},
        {Name:'科室8',CountA:76,CountB:44},
        {Name:'科室9',CountA:76,CountB:44},
        {Name:'科室10',CountA:76,CountB:44},
        {Name:'科室11',CountA:76,CountB:44},
        {Name:'科室12',CountA:76,CountB:44},
        {Name:'科室13',CountA:76,CountB:44},
        {Name:'科室14',CountA:76,CountB:44},
      ],
    };
  },
  mounted() {
    // this.getData();
    this.initCharts()
  },
  methods: {
    async initCharts() {
      // const data = await this.$http.get(
      //   `/api/RepairReport/RepairLargeScreenModelBList`
      // );

      if (!this.myChart) {
        this.myChart = init(document.getElementById("echart8"));
        // this.myChart.on("click", (ev) => {
        //   this.filters = [
        //     {
        //       Name: "ApplyTime",
        //       compare: ">=",
        //       value: ev.data.Ds,
        //     },
        //     {
        //       Name: "ApplyTime",
        //       compare: "<",
        //       value: ev.data.De,
        //     },
        //   ];
        //   this.sub_title = ev.data.Week;
        //   this.dialog_visible = true;
        // });
      }
      const option = {
        grid: {
          top: 69,
          let: 27,
          right: 31,
          bottom: 101,
        },
        title:[
          {
            text:'科室RFID设备占比',
            top:16,
            left:24,
            textStyle:{
              color:'#d6e2ff',
              fontSize:18,
              fontWeight:400,
              fontFamily:'Microsoft YaHei',
            },
          },
          {
            text:'(单位:%)',
            top:20,
            left:180,
            textStyle:{
              color:'#d6e2ff',
              fontSize:14,
              fontWeight:400,
              fontFamily:'Microsoft YaHei',
            },
          }
        ],
        legend:{
          top:21,
          textStyle:{
            color:'#d6e2ff',
            fontSize:14,
            padding:4
          },
          itemWidth:14,
          itemHeight:12,
          itemGap:16
        },
        tooltip:{
          trigger:'axis',
          formatter:`{a0}:{c0}%</br>{a1}:{c1}%`
        },
        xAxis: {
          type: "category",
          axisTick: {
            show: false,
          },
          axisLabel: {
            show: true,
            rotate: 45,
            hideOverlap: true,
            color: "#d6e2ff",
            formatter:e=>e.length<=7?e:(e.slice(0,6)+'...'),
          },
          axisLine:{
            lineStyle:{
              color:'#153158'
            }
          },
          data: this.list.map((v) => v.Name),
        },
        yAxis: {
          type: "value",
          splitLine:{
            lineStyle:{
              color:'#153158'
            }
          },
          axisLine: {
            show: true,
            lineStyle:{
              color: "#153158"
            },
          },
          axisLabel:{
            textStyle:{
              color: "#d6e2ff",
            }
          },
          max:100,
        },
        series: [
          {
            type:'bar',
            name:'RFID自动盘点',
            color:'#0ff5f8',
            barWidth:12,
            barGap:0,
            data:this.list.map(i=>i.CountA)
          },
          {
            type:'bar',
            name:'RFID手动盘点',
            color:'#20a5f7',
            barWidth:12,
            data:this.list.map(i=>i.CountB)
          },
        ],
      };
      this.myChart.setOption(option);
    },
    getData(){
      this.$http.get(`/api/StocktakingAccountReport/StocktakingReportE/${this.chooseBatch}`)
        .then(res=>{
          this.list=res
          this.initCharts()
        })
    },
    resize(){
      this.myChart.resize()
    }
  },
  watch:{
    chooseBatch(){
      this.getData()
    }
  }
};
</script>

<style>
</style>